<!DOCTYPE html>
<!--[if lte IE 8]>              <html class="ie8 no-js" lang="en">     <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="not-ie no-js" lang="en">  <!--<![endif]-->
<head>
	
	<!-- Google Web Fonts
  ================================================== -->
	<link href='http://fonts.useso.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
	
	<!-- Basic Page Needs
  ================================================== -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<title>Accio | Project Single</title>	
	
	<meta name="description" content="">
	<meta name="author" content="">
	
	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.png">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">	

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/grid.css" />
	<link rel="stylesheet" href="css/layout.css" />
	<link rel="stylesheet" href="css/fontello.css" />
	<link rel="stylesheet" href="css/animation.css" />
	
	<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" />
	
	<!-- HTML5 Shiv
	================================================== -->
	<script src="js/jquery.modernizr.js"></script>
	
</head>

<body data-spy="scroll" data-target="#navigation" class="page-template">
	
	
	<!-- - - - - - - - - - - - - - Loader - - - - - - - - - - - - - - - - -->	

	
	<div class="loader"></div><!--/ .loader-->
	
	
	<!-- - - - - - - - - - - - - end Loader - - - - - - - - - - - - - - - -->	
	
	
<!-- - - - - - - - - - - - - - Header - - - - - - - - - - - - - - - - -->	
	

<header id="header">
	
	<div class="header-in">
		
		<h1 id="logo"><a href="index.html">Accio</a></h1>
		
		<a id="responsive-nav-button" class="responsive-nav-button" href="#"></a>
		
		<nav id="navigation" class="navigation">
			
			<ul>
				<li><a href="index.html">Home</a>
					<ul>
						<li><a href="index.html">Layer Slider</a></li>
						<li><a href="index-3.html">Slider Parallax</a></li>
						<li><a href="index-2.html">Video Background</a>
							<ul>
								<li><a href="index-2.html">Youtube Video</a></li>
								<li><a href="index-4.html">Vimeo Video</a></li>
								<li><a href="index-5.html">Self Hosted Video</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="index.html#about">About</a></li>
				<li><a href="index.html#team">Team</a></li>
				<li class="current-menu-item"><a href="index.html#folio">Folio</a></li>
				<li><a href="index.html#services">Services</a></li>
				<li><a href="index.html#blog">Blog</a></li>
				<li><a href="index.html#pricing">Pricing</a></li>
				<li><a href="index.html#contacts">Contacts</a></li>
				<li><a href="shortcodes.html">Shortcodes</a></li>
				<li><a href="http://www.weidea.net">More</a></li>
			</ul>

		</nav><!--/ #navigation-->
		
	</div><!--/ .header-in-->
	
</header><!--/ #header-->


<!-- - - - - - - - - - - - - end Header - - - - - - - - - - - - - - - -->


<!-- - - - - - - - - - - - - - Wrapper - - - - - - - - - - - - - - - - -->
	

<div id="wrapper">
	
	<section id="project-single" class="page">
	
		<div id="content">

			<section class="section">

				<div class="container">

					<div class="row">
						
						<div class="col-xs-12">
							
							<div class="project-single-entry">

								<div class="project-page-header">
									
									<h1 class="project-title">Video Project</h1>
									
									<ul class="project-nav clearfix">
										<li><a class="prev" href="project-single-3.html">Prev</a></li>
										<li><a class="all-projects" href="index.html#folio">All Projects</a></li>
										<li><a class="next" href="project-single.html">Next</a></li>
									</ul><!--/ .project-nav-->
									
								</div><!--/ .folio-page-header-->

								<div class="image-slider">
									
									<iframe width="1130" height="600" src="//www.youtube.com/embed/qGsTlYLbwy4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
									
								</div><!--/ .image-slider-->								

							</div><!--/ .folio-single-entry-->	
							
						</div>
						
					</div><!--/ .row-->
					
					<div class="row">
						
						<div class="col-sm-3">
							
							<ul class="project-meta">
								
								<li>
									<span class="project-meta-title">Date</span>
									<div class="project-meta-date">October 25, 2013</div>
								</li>
								
								<li>
									<span class="project-meta-title">Client</span>
									<div class="project-meta-date">Vivamus mattis</div>
								</li>
								
								<li>
									<span class="project-meta-title">Tags:</span>
									<div class="project-meta-date">Design, Photography</div>
								</li>
								
							</ul><!--/ .project-meta-->
							
							<a href="#" class="button default">View Project</a>
							
						</div>	
						
						<div class="col-sm-9">
							
							<h2 class="content-title">About this project</h2>
							
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut lacus at velit consequat sodales. Ut posuere neque 
								in molestie gravida. Integer eu feugiat neque, elementum posuere purus. Nam vitae convallis ipsum. Maecenas a vulputate ipsum, 
								vestibulum lobortis enim. Sed nec consequat felis. Proin amet sollicitudin neque, a rhoncus nisl. Aliquam malesuada elementum risus, 
								sit amet dictum erat tempor nec. Suspendisse massa, consequat at pellentesque , aliquam ullamcorper orci. Phasellus ullamcorper 
								pharetra nisl vel pretium. Pellentesque ut bibendum purus. Phasellus id dictum justo. Cras commodo sem non justo varius imperdiet. 
								Curabitur convallis tortor in ipsum vehicula, in ultricies felis blandit. 
							</p>	
							
							<div class="quotes align-center">
								<blockquote class="type-1">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet sapien bibendum aenean tempor augue</p>
								</blockquote>
								<p class="quote-author"><span>Jack Black</span></p>
							</div><!--/ .quotes-->
							
							<p>
								ed nec consequat felis. Proin amet sollicitudin neque, a rhoncus nisl. Aliquam malesuada elementum risus, sit amet dictum erat 
								tempor nec. Suspendisse massa, consequat at pellentesque , aliquam ullamcorper orci. 
								Phasellus ullamcorper pharetra nisl vel pretium. Pellentesque ut bibendum purus. 
							</p>
							
						</div>
						
					</div><!--/ .row-->
					
					<div class="row">
						<div class="col-xs-12">
							<div class="divider"></div>
						</div>	
					</div><!--/ .row-->
					
					<div class="row">
						
						<div class="col-xs-12">
							
							<h2 class="content-title">Related Projects</h2>
							
							<div class="project-similar">
								<ul>
									<li>
										<div class="work-item">
											<img src="http://placehold.it/510x375" alt="" />
											<div class="image-extra">
												<div class="extra-content">
													<div class="inner-extra">
														<a class="single-image link-icon" href="project-single.html"></a>
														<a class="single-image plus-icon" data-fancybox-group="related" href="images/portfolio/1.jpg"></a>	
													</div><!--/ .inner-extra-->	
												</div><!--/ .extra-content-->
											</div><!--/ .image-extra-->	
										</div><!--/ .work-item-->	
									</li>
									<li>
										<div class="work-item">
											<img src="http://placehold.it/510x375" alt="" />
											<div class="image-extra">
												<div class="extra-content">
													<div class="inner-extra">
														<a class="single-image link-icon" href="project-single-2.html"></a>
														<a class="single-image plus-icon" data-fancybox-group="related" href="images/portfolio/2.jpg"></a>	
													</div><!--/ .inner-extra-->	
												</div><!--/ .extra-content-->
											</div><!--/ .image-extra-->	
										</div><!--/ .work-item-->
									</li>
									<li>
										<div class="work-item">
											<img src="http://placehold.it/510x375" alt="" />
											<div class="image-extra">
												<div class="extra-content">
													<div class="inner-extra">
														<a class="single-image link-icon" href="project-single-3.html"></a>
														<a class="single-image plus-icon" data-fancybox-group="related" href="images/portfolio/3.jpg"></a>	
													</div><!--/ .inner-extra-->	
												</div><!--/ .extra-content-->
											</div><!--/ .image-extra-->	
										</div><!--/ .work-item-->
									</li>
								</ul>
							</div><!--/ .project-similar-->
							
						</div>
						
					</div><!--/ .row-->

				</div><!--/ .container-->
				
			</section><!--/ .section-->
		
		</div><!--/ #content-->
		
	</section><!--/ .section-->
	
	
	<!-- - - - - - - - - - - - - - Footer - - - - - - - - - - - - - - - - -->
	
	
	<footer id="footer">

		<div class="bottom-footer clearfix">

			<div class="container">
				
				<div class="row">
					
					<div class="col-sm-6">
						
						<div class="copyright">
							Copyright © 2013. Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>. All rights reserved
						</div><!--/ .cppyright-->
						
					</div>
					
					<div class="col-sm-3 col-sm-offset-3">
						
						<div class="developed">
							More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
						</div><!--/ .developed-->
						
					</div>
					
				</div><!--/ .row-->
				
			</div><!--/ .container-->

		</div><!--/ .bottom-footer-->	
		
	</footer><!--/ #footer-->

	
	<!-- - - - - - - - - - - - - end Footer - - - - - - - - - - - - - - - -->
	
	
</div><!--/ #wrapper-->


<!-- - - - - - - - - - - - - end Wrapper - - - - - - - - - - - - - - - -->


<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
<![endif]-->
<script src="js/jquery.queryloader2.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<script src="js/jquery.smoothscroll.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/config.js"></script>
<script src="js/custom.js"></script>
      
</body>
</html>
